<template>
	<view class="page-view flex flex-direction">
		<zx-nav title="发票申请" bg="#fff" fixedTop></zx-nav>
		<view class="main flex-sub">
			<view class="title u-m-t-30">
				<text class="u-primary">*</text>
				<text>请选择您要开发票的订单</text>
			</view>
			<view class="card u-m-t-30">
				<view class="orderlist">
					<view class="order-item solid-bottom flex align-center justify-between" v-for="(item, index) in orderlist" :key="item.order_no">
						<view style="white-space: nowrap">
							<text>订单号：</text>
							<text class="orderNo">{{ item.order_no }}</text>
						</view>
						<view style="white-space: nowrap" class="flex-sub margin-left-sm margin-right-sm">
							<text>订单金额：</text>
							<text class="money">{{ item.amount }}元</text>
						</view>
						<image @tap="delOrder(index)" src="/static/invoice/minus.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="add flex align-center" @tap="showOrder">
					<image src="/static/invoice/add.png" mode="widthFix"></image>
					<text>添加订单</text>
				</view>
			</view>
			<view class="title u-m-t-40">
				<text class="u-primary">*</text>
				<text>发票信息</text>
			</view>
			<view class="subtitle">
				<text class="u-primary">*</text>
				<text>发票抬头</text>
				<text class="tip">（公司名称）</text>
			</view>
			<view class="card">
				<input type="text" v-model="name" class="input-txt" />
			</view>
			<view class="subtitle">
				<text class="u-primary">*</text>
				<text>税号</text>
				<text class="tip">（统一社会信用代码）</text>
			</view>
			<view class="card">
				<input v-model="number" class="input-txt" />
			</view>
			<view class="subtitle">
				<text>其他</text>
				<text class="tip">（邮箱/银行账号/开户行等）</text>
			</view>
			<view class="card">
				<textarea auto-height v-model="info" class="textarea-txt" />
			</view>
		</view>
		<view class="footerbar flex">
			<view class="flex-1 btn" @tap="showLog">查看开票记录</view>
			<view class="flex-1 btn" @tap="save">提交</view>
		</view>
		<orderModal ref="orderModal" @add="addOrder"></orderModal>
	</view>
</template>

<script>
import orderModal from './orderModal.vue';
export default {
	data() {
		return {
			name: '',
			number: '',
			info: '',
			orderlist: []
		};
	},
	components: {
		orderModal
	},
	methods: {
		showOrder() {
			this.$refs.orderModal.open();
		},
		addOrder(list) {
			let ids = this.orderlist.length > 0 ? this.orderlist.map(item => item.order_no) : [];
			let orderlist = [...this.orderlist];
			list.forEach(item => {
				if (ids.length == 0 || !ids.includes(item.order_no)) {
					orderlist.push(item);
				}
			});
			this.orderlist = [...orderlist];
		},
		delOrder(index) {
			this.orderlist.splice(index, 1);
		},
		save() {
			if (this.orderlist.length == 0) {
				uni.showToast({
					title: '请选择您要开发票的订单',
					icon: 'none'
				});
				return;
			}
			if (!this.name) {
				uni.showToast({
					title: '请输入发票抬头',
					icon: 'none'
				});
				return;
			}
			if (!this.number) {
				uni.showToast({
					title: '请输入税号',
					icon: 'none'
				});
				return;
			}
			let orders_number = this.orderlist.map(item => item.order_no).join(',');
			this.$postAction(this.$api.addInvoices, {
				name: this.name,
				number: this.number,
				info: this.info,
				orders_number
			}).then(da => {
				uni.showToast({
					title: '开票申请成功',
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateTo({
						url: '/invoice/invoiceList'
					});
				}, 800);
			});
		},
		showLog() {
			uni.navigateTo({
				url: '/invoice/invoiceList'
			});
		}
	}
};
</script>

<style scoped lang="scss">
.page-view {
	height: 100vh;
	background: #f4f4f4;

	.title {
		font-weight: 500;
		font-size: 30rpx;
		color: #1c1c1e;
		line-height: 42rpx;
	}

	.subtitle {
		font-size: 28rpx;
		color: #1c1c1e;
		margin: 28rpx 0 16rpx;

		.tip {
			color: #848484;
			font-size: 24rpx;
		}
	}
}

.card {
	background: #ffffff;
	border-radius: 12rpx;

	.add {
		font-weight: 500;
		font-size: 30rpx;
		color: #1c1c1e;
		margin: 0 22rpx;
		padding: 32rpx 0;

		image {
			width: 48rpx;
			height: 48rpx;
			margin-right: 16rpx;
		}
	}

	.input-txt {
		padding: 20rpx;
		font-size: 28rpx;
		color: #1c1c1e;
		height: 80rpx;
	}

	.textarea-txt {
		padding: 20rpx;
		font-size: 28rpx;
		color: #1c1c1e;
		min-height: 180rpx;
		width: 100%;
	}
}

.orderlist {
	padding: 0 22rpx;

	.order-item {
		padding: 34rpx 0;
		font-size: 24rpx;
		color: #848484;
		line-height: 33rpx;

		image {
			width: 48rpx;
			height: 48rpx;
		}

		.orderNo {
			color: #1c1c1e;
		}

		.money {
			color: #ff3c47;
		}
	}
}

.footerbar {
	padding: 34rpx 28rpx;
	padding-bottom: calc(34rpx + env(safe-area-inset-bottom) / 2);

	.btn {
		width: 330rpx;
		height: 82rpx;
		border-radius: 41rpx;
		border: 2rpx solid #ff3c47;
		color: #ff3c47;
		font-weight: 500;
		font-size: 28rpx;
		text-align: center;
		line-height: 78rpx;

		& + .btn {
			background: linear-gradient(90deg, #ff8173 0%, #ff3543 100%);
			box-shadow: 0rpx 12rpx 24rpx -9rpx #ffbec2;
			border: none;
			color: #fff;
			line-height: 82rpx;
			margin-left: 34rpx;
		}
	}
}
</style>
